<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/css/base.css">
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        vue2 组件使用 v-model 必须在子组件内部 定义 指令v-model 的描述配置 model
            + model 取值固定配置对象 { prop:"属性名",event:"事件名" }
            + model属性描述的 prop 为 props 的拦截属性名，需要再次被 props进行拦截
            + model属性描述的 event 为 组件自定义绑定属性，可以直接被$emit触发调用
        
        ！！vue2 的组件标签只能有一个 v-model 组件指令
            
        vue2 的v-bind 指令在组件绑定时可以使用修饰符 .sync 自动完成事件绑定，绑定的事件名为 update:属性名
            例如：v-bind:info.sync 
                        - v-bind:info
                        - v-on:update:info
        </pre>
        <h5>父组件</h5>
        <p>msg:{{ msg }}</p>
        <p>info:{{ info }}</p>

        <my-comp v-model="msg" v-bind:info.sync="info"></my-comp>

    </div>

    <script type="text/x-template" id="my-comp">
        <div class="cbox">
            <input v-model="argA" type="text" />
            <br>
            <input v-model="argB" type="text" />
        </div>
    </script>

    <script type="module">
        import Vue from "../../assets/vue2/vue.esm.browser.js";
        const MyComp = {
            template:"#my-comp",
            model:{
                prop:"msg",
                event:"update:msg"
            },
            props:["msg","info"],
            computed: {
                argA:{
                  get(){
                    return this.msg
                  },
                  set(nv){
                    this.$emit("update:msg",nv)
                  }
                },
                argB:{
                    get(){
                        return this.info
                    },
                    set(nv){
                        this.$emit("update:info",nv)
                    }
                }
            },
        }
        new Vue({
            el:"#app",
            components: {
                MyComp,
            },
            data(){
                return {
                   msg:"msg变量",
                   info:"info变量"
                }
            }
        })
    </script>
</body>
</html>